<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en" th:replace="header/header :: header('个人资料-实体商户社群服务平台',
'/assets/layui/css/layui.css,/assets/module/admin.css,/assets/css/userInfo.css',
'/assets/libs/index/app.js?v=1')">
</head>
<body class="theme-my" data-theme="theme-my">

<!-- 顶部导航-->
<div th:replace="common/index/indexbar :: indexbar"></div>

<!--头条主体-->
<div class="content">
    <div class="compNews wrapper contDiaryTop">
        <div class="layui-fluid">
		    <div class="layui-row layui-col-space15">
		        <!-- 左 -->
		        <div class="layui-col-sm12 layui-col-md3">
		            <div class="layui-card">
		                <div class="layui-card-body" style="padding: 25px;">
		                    <div class="text-center layui-text">
		                        <div class="user-info-head" id="userInfoHead">
		                            <img th:src="${user.avatar}" alt=""/>
		                        </div>
		                        <h2 style="padding-top: 20px;" th:text="${user.nickName}"></h2>
		                        <div style="padding-top: 8px;">
		                        	<span class="layui-badge" style="border-radius: 19px;" th:if="${user.label != null && user.label != ''}" th:text="${user.label}"></span>
		                        </div>
		                    </div>
		                    <div class="layui-text" style="padding-top: 30px;">
		                        <div class="user-info-list-item">
		                            <i class="layui-icon layui-icon-star"></i>
		                            <p th:text="${user.formatName}"></p>
		                        </div>
		                    </div>
		                    <div class="layui-line-dash"></div>
		                    <h3>个性签名</h3>
		                    <div class="layui-badge-list" style="padding-top: 6px;">
		                    	 <p th:text="${user.remark}"></p>
		                    </div>
		                </div>
		            </div>
		        </div>
		        <!-- 右 -->
		        <div class="layui-col-sm12 layui-col-md9">
		            <div class="layui-card">
		                <!-- 选项卡开始 -->
		                <div class="layui-tab layui-tab-brief" lay-filter="userInfoTab">
		                    <ul class="layui-tab-title">
		                        <li class="layui-this">基本信息</li>
		                        <li>账号绑定</li>
		                        <li>修改密码</li>
		                    </ul>
		                    <div class="layui-tab-content">
		                        <!-- tab1 -->
		                        <div class="layui-tab-item layui-show">
		                            <form class="layui-form" id="userInfoForm" lay-filter="userInfoForm"
		                                  style="max-width: 400px;padding: 25px 10px 0 0;">
		                                <div class="layui-form-item">
		                                    <label class="layui-form-label layui-form-required">昵称</label>
		                                    <div class="layui-input-block">
		                                        <input name="nickName" placeholder="请输入昵称（2-12个字符）" maxlength="12" th:value="${user.nickName}" class="layui-input" lay-reqText="昵称不能为空" lay-vertype="tips" lay-verify="required" required/>
		                                    </div>
		                                </div>
		                                <div class="layui-form-item">
		                                    <label class="layui-form-label">业态</label>
		                                    <div class="layui-input-block">
		                                    	<select name="formatId">
		                                    		<option value="">请选择业态</option>
		                                    		<option th:each="item:${formats}" th:value="${item.formatId}" th:text="${item.formatName}" th:selected="${item.formatId == user.formatId}">请选择业态</option>
		                                    	</select>
		                                    </div>
		                                </div>
		                                <div class="layui-form-item">
					                        <label class="layui-form-label" style="width: 90px;">个人标签</label>
					                        <div class="layui-input-block" th:if="${user.label != null && user.label != ''}">
					                            <input id="demoTagsInput3" name="label" th:value="${user.label}" class="layui-hide"/>
					                        </div>
					                        <div class="layui-input-block" th:if="${user.label == null || user.label == ''}">
					                            <input id="demoTagsInput3" name="label" value="" class="layui-hide"/>
					                        </div>
					                    </div>
		                                <div class="layui-form-item">
		                                    <label class="layui-form-label" style="width: 90px;">个性签名</label>
		                                    <div class="layui-input-block">
		                                        <textarea name="remark" placeholder="个性签名(50字以内)" maxlength="50" class="layui-textarea" th:text="${user.remark}"></textarea>
		                                    </div>
		                                </div>
		                                <div class="layui-form-item">
		                                    <div class="layui-input-block">
		                                        <button class="layui-btn" lay-filter="userInfoSubmit" lay-submit>更新基本信息</button>
		                                    </div>
		                                </div>
		                            </form>
		                        </div>
		                        <!-- tab1 -->
		                        <div class="layui-tab-item" style="padding-bottom: 20px;">
		                            <div class="user-bd-list layui-text">
		                                <div class="user-bd-list-item">
		                                    <div class="user-bd-list-lable">更换手机号</div>
		                                    <div class="user-bd-list-text" th:text="'当前手机号：' + ${phone}"></div>
		                                    <a class="user-bd-list-oper">修改</a>
		                                </div>
		                                <div class="user-bd-list-item">
		                                    <div class="user-bd-list-img">
		                                        <i class="layui-icon layui-icon-login-wechat"
		                                           style="color: #4DAF29;font-size: 48px;"></i>
		                                    </div>
		                                    <div class="user-bd-list-content">
		                                        <div class="user-bd-list-lable">绑定微信</div>
		                                        <div class="user-bd-list-text">当前未绑定绑定微信账号</div>
		                                    </div>
		                                    <a class="user-bd-list-oper">绑定</a>
		                                </div>
		                            </div>
		                        </div>
		                        <div class="layui-tab-item" style="padding-bottom: 20px;">
		                        	<div class="userSettings-con userSettings-block" >
										<div class="userSettings-cList layui-form" lay-filter="pwdform">
											<ul>
												<li class="userSettings-cList-li userSettings-upHeadPort">
													<label style="width: 100px;">当前手机号</label>
													<div class="currentPhone" th:text="'验证码将发送到手机' + ${phone}"></div>
												</li>
												<li class="userSettings-cList-li">
													<label class="layui-form-required">短信验证码</label>
													<div class="setWrapUp">
														<input type="text" name="code" class="userSettings-cList-input layui-input" 
															lay-reqText="验证码不能为空" lay-vertype="tips" lay-verify="required" required placeholder="输入 4位验证码" /> 
														<button class="ObtainCode" id="smscode" style="border:none;">获取验证码</button>
													</div>
												</li>
												
												<li class="userSettings-cList-li">
													<label class="layui-form-required" for="">新密码</label>
													<div class="setWrapUp">
														<input type="password" name="newPsw" class="userSettings-cList-input layui-input" lay-reqText="密码不能为空" lay-vertype="tips" lay-verify="required" required
															placeholder="6-16位数字和字母组合" /> 
														<span class="promptMsg" id="newPwdError"></span>
													</div>
												</li>
												<li class="userSettings-cList-li">
													<label class="layui-form-required" for="">确认新密码</label>
													<div class="setWrapUp">
														<input type="password" name="rePsw" placeholder="请再次输入新密码" class="userSettings-cList-input layui-input" 
															lay-reqText="两次密码不一致" lay-vertype="tips" lay-verify="required|equalTo" lay-equalto="input[name=newPsw]" required="">
														<span class="promptMsg" id="pwdOkError"></span>
													</div>
												</li>
												<li class="userSettings-cList-li">
													<label for=""></label>
													<button class="layui-btn" lay-filter="userpwdSubmit" lay-submit>提交</button>
												</li>
											</ul>
										</div>
									</div>
		                        </div>
		                    </div>
		                </div>
		                <!-- //选项卡结束 -->
		            </div>
		        </div>
		    </div>
		</div>
    </div>
</div>


<!-- 回到顶部 -->
<div th:replace="common/channel/backTop :: backTop"></div>

<!--页脚-->
<div th:replace="common/footer :: footer"></div>


<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'element', 'admin', 'tagsInput', 'formX', 'mynotice', 'ax', 'imgChoose'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var formX = layui.formX;
        var element = layui.element;
        var $ax = layui.ax;
        var admin = layui.admin;
        var tagsInput = layui.tagsInput;
        var mynotice = layui.mynotice;
        var imgChoose = layui.imgChoose;
        
        form.render('select');
        
        var uuid = '';
        
        // BackSpace键可删除标签
        $('#demoTagsInput3').tagsInput({
        	removeWithBackspace: true,
            onAddTag: function(tag){
            	if(tag.length > 8){
            		mynotice.infoc('标签长度不能超过8个字符');
            		$('#demoTagsInput3').removeTag(tag);
            		return;
            	}
            	var tags = $('#demoTagsInput3').val();
            	if(tags.split(',').length > 1){
            		mynotice.infoc('最多只能添加一个标签');
            		$('#demoTagsInput3').removeTag(tag);
            	}
            	
            }
        });

        /* 选择头像 */
        $('#userInfoHead').click(function () {
        	imgChoose.open({
                fileUrl: '',
                listUrl: '/web/avatar/all',
                num: 1,
                dialog: {
                    offset: 'auto',
                    title: ['挑选推荐头像', 'background-color:#ffffff;'],
                    move: false,
                },
                onChoose: function (urls) {
                    var ajax = new $ax('/api/zp/avatarurl', 'post', function (res) {
                    	$('#userInfoHead>img').attr('src', urls[0].url);
                    	$('.headerRt-liA-img').attr('src', urls[0].url);
	                    mynotice.infoc('修改成功！');
            	    }, function (res) {
            	    	mynotice.error(res.msg);
            	    });
                    ajax.setData(JSON.stringify(urls[0].url));
            	    ajax.start();
                }
            });
        });

        /* 监听表单提交 */
        form.on('submit(userInfoSubmit)', function (data) {
            var ajax = new $ax('/api/zp/update/user/info', 'post', function (res) {
            	location.reload();
    	    }, function (res) {
    	    	mynotice.error(res.msg);
    	    });
            ajax.setData(JSON.stringify(data.field));
    	    ajax.start();
            return false;
        });
        
        // 修改密码
        /* 监听表单提交 */
        form.on('submit(userpwdSubmit)', function (data) {
            var ajax = new $ax('/api/zp/update/user/pwd', 'post', function (res) {
            	mynotice.success('修改成功');
            	form.val('pwdform', {
            		code: '',
            		newPsw: '',
            		rePsw: ''
            	});
    	    }, function (res) {
    	    	mynotice.error(res.msg);
    	    });
            data.field.uuid = uuid;
            ajax.setData(JSON.stringify(data.field));
    	    ajax.start();
            return false;
        });
        
        // 发送短信验证码
        $('#smscode').on('click', function(){
        	admin.btnLoading('#smscode', '正在发送...');
        	var ajax = new $ax('/reset/sms', 'get', function (res) {
        		admin.btnLoading('#smscode', false);
        		uuid = res.data;
        		formX.startTimer('#smscode', 30, function(time){
        			if(time == 1){
        				$('#smscode').attr('disabled', false);
        			}
        	        return time + 's 后可继续发送';
        	    });
     	    }, function (res) {
     	    	admin.btnLoading('#smscode', false);
     	    	$('#smscode').attr('disabled', false);
     	    	mynotice.error(res.msg);
     	    });
     	    ajax.start();
        })
        

    });
</script>

</body>
</html>